import React, { Component } from 'react'
import { Layout, Button, message } from 'antd';
const { Content } = Layout;
const constraints = window.constraints = {
    audio: false,
    video: true
};
export default class P6_local_file extends Component {
    canPlay = () => {
        let sourceVideo = this.refs['source_video']
        let destVideo = this.refs['dest_video']
        let stream

        //帧率
        const fps = 0
        stream = sourceVideo.mozCaptureStream ?//捕获数据流
            sourceVideo.mozCaptureStream() ://火狐浏览器
            sourceVideo.captureStream();//谷歌浏览器
        destVideo.srcObject = stream
    }

    render() {
        return (
            <div>
                <Content
                    className="site-layout-background"
                    style={{
                        padding: 24,
                        margin: 0,
                        minHeight: 700,
                    }}>
                    <h3>本地MP4文件:</h3>
                    <video ref="source_video" weight="600" height="400"
                        controls loop muted
                        playsInline autoPlay
                        onCanPlay={this.canPlay}
                    >
                        <source src="./files/webrtc.mp4" type="video/mp4" />
                    </video><br /><br />
                    <br />
                    <br />
                    <h3>WebRTC同步显示</h3>
                    <video ref="dest_video" weight="600" height="400" playsInline autoPlay></video>
                </Content>
            </div>
        )
    }
}
